<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>不通过ajax获取信息，通过静态的html无法满足动态网页的要求</h2>
    <p>欢迎你，xxx</p>
    <hr>
    <h2>ajax处理响应的json字符串</h2>
    <h3>班级信息</h3>
    <p id="class_info"></p>
    <ul></ul>
    <script src="../util.js"></script>

    <script>
        var classInfo = document.querySelector("#class_info");
        var stuList = document.querySelector("ul");
        //这样就页面初始化加载就执行

        ajax({
            method: "GET",
            url: "../response/json",
            callback: function(status, responseText){
                //先简单的打印，验证一下，是否可以获取响应
                console.log("响应状态码："+status+"，响应正文："+responseText);

                //
                var json = JSON.parse(responseText);
                console.log(json);

                classInfo.innerHTML = `
                    id：${json.id}, 班级名称：${json.name}
                `
                //ul学生列表中，要解析响应的学生列表数据，然后渲染到dom元素中
                var content = '';
                for(var stu of json.students){
                    content += `
                        <li>学生姓名：${stu.username}，密码：${stu.password}</li>
                    `
                }
                stuList.innerHTML = content;
            }
        });
    </script>
</body>
</html>

<!--querrString提交-->